<template>
  <div>
    <span class="logo">
      <img src="@/assets/logo.png" alt="logo"/>
      <span>伏羲管理系统</span>
    </span>
    <el-menu
        active-text-color="#2376b7"
        background-color="#fff"
        :default-active="activeMenu"
        :unique-opened="true"
        text-color="#7a7374"
        :router="true"
    >
      <el-sub-menu v-for="item in menuTreeList" :key="item.id" :index="item.pagePath">
        <template #title>
          <el-icon>
            <icon-menu/>
          </el-icon>
          <span>{{ item.menuName }}</span>
        </template>
        <el-menu-item v-for="sub in item.subMenuList" :key="sub.id" :index="sub.pagePath"
                      :route="{path: sub.pagePath, state: {m: sub.id,p: sub.permissions}}">{{ sub.menuName }}
        </el-menu-item>
      </el-sub-menu>
    </el-menu>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue';
import {onBeforeRouteUpdate} from 'vue-router';
import request from '@/api/sys/MenuApi.js';
import {Menu as IconMenu} from '@element-plus/icons-vue';

let activeMenu = ref(location.pathname);
let menuTreeList = ref([]);

onBeforeRouteUpdate((to) => {
  activeMenu.value = to.path;
});

onMounted(() => {
  request.permissionsTreeList().then((data) => {
    menuTreeList.value = data.data;
  });
});
</script>

<style scoped>
.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

.logo span {
  color: #856d72;
  font-size: 18px;
  font-weight: bold;
}

.logo img {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}
</style>